<!doctype html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="common/backstageNavigator.html :: head"></div>
</head>

<body>
<div th:replace="common/backstageNavigator.html :: banner"></div>

<div class="container-fluid" id="SI">
    <div class="row">
        <div th:replace="common/backstageNavigator.html :: navi"></div>
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">

            <form class="form-inline mt-2 mt-md-0" method="post" th:action="@{/SearchStudents}">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">学号</span>
                    </div>
                    <input class="form-control mr-sm-2" th:name="sno" type="number" v-model="searchStudent.sno"
                           placeholder="学号"
                           aria-label="Search">
                </div>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">姓名</span>
                    </div>
                    <input class="form-control mr-sm-2" th:name="sname" type="text" v-model="searchStudent.sname"
                           placeholder="姓名"
                           aria-label="Search">
                </div>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">专业</span>
                    </div>
                    <input class="form-control mr-sm-2" th:name="major" type="text" v-model="searchStudent.major"
                           placeholder="专业"
                           aria-label="Search">
                </div>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">年级</span>
                    </div>
                    <input class="form-control mr-sm-2" type="text" th:name="grade" v-model="searchStudent.grade"
                           placeholder="年级"
                           aria-label="Search">
                </div>
                <button class="btn btn-outline-primary mr-sm-2" type="submit">
                    <span data-feather="search"></span>
                    搜索
                </button>
            </form>
            <h1></h1>
            <a href="/StudentsAddAction" class="btn btn-outline-primary mr-sm-2" role="button">
                <span data-feather="user-plus"></span>
                添加学生
            </a>
            <!--<button @click="upload" class="btn btn-xs btn-primary">Upload</button>-->
            <h2></h2>
            <table class="table">
                <thead class="thead-light">
                <tr>
                    <th scope="col">学号</th>
                    <th scope="col">姓名</th>
                    <th scope="col">性别</th>
                    <th scope="col">专业</th>
                    <th scope="col">年级</th>
                    <th scope="col">班级</th>
                    <th scope="col">入学时间</th>
                    <th scope="col">学院</th>
                    <th scope="col">电话</th>
                    <th scope="col">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(student, index) in pagestudents">
                    <td>{{student.sno}}</td>
                    <td>{{student.sname}}</td>
                    <td>{{student.sex}}</td>

                    <td>{{student.major}}</td>
                    <td>{{student.grade}}</td>
                    <td>{{student.klass}}</td>
                    <td>{{student.comeYear}}</td>
                    <td>{{student.college}}</td>
                    <td>{{student.phone}}</td>
                    <td>
                        <button class="btn btn-outline-primary btn-sm" v-on:click="change(student.sno)">修改</button>
                    </td>
                </tr>
                </tbody>
            </table>
            <!--分页-->
            <div>
                <button @click="prePage()" id="btnprepage">上一页</button>
                <button @click="nextPage()" id="btnnextpage">下一页</button>
                <input type="text" v-model="jumppage" style="width: 40px">
                <button @click="leapPage()">跳转</button>
                <label>当前{{ currentpage+1 }}/{{ pagenum }}</label>
            </div>
        </main>
    </div>
</div>

<script type="text/javascript" th:inline="javascript">
    // var allStudents =[[${allStudents}]]
    var si = new Vue({
        el: '#SI',
        mounted: function () {
            this.getpage()
        },
        methods: {
            change: function (sno) {
                window.location = "/UpdateStudent?sno=" + sno;
            },
            getpage: function () {
                this.pagenum = Math.ceil(this.students.length / this.pagesize) || 1;
                for (var i = 0; i < this.pagenum; i++) {
                    this.totalpage[i] = this.students.slice(this.pagesize * i, this.pagesize * (1 + i));
                }
                this.pagestudents = this.totalpage[this.currentpage];
            },
            prePage: function () {
                if (this.currentpage - 1 == -1) return;
                this.pagestudents = this.totalpage[--this.currentpage];
            },
            nextPage: function () {
                if (this.currentpage == this.pagenum - 1) return;
                this.pagestudents = this.totalpage[++this.currentpage];
            },
            leapPage: function () {
                if (this.jumppage > this.pagenum || this.jumppage < 1) {
                    alert('输入有误');
                } else {
                    this.currentpage = this.jumppage - 1;
                    this.pagestudents = this.totalpage[this.currentpage];
                }
            }

        },
        data: {
            searchStudent: {
                sno: null,
                sname: '',
                sex: '',
                major: '',
                klass: '',
                comeYear: '',
                phone: '',
                college: '',
                collegeId: 0,
                grade: '',
                majorId: 0,
            },
            jumppage: null,
            pagesize: 8,
            pagestudents: [],
            totalpage: [],
            pagenum: '',
            currentpage: 0,
            students: [[${allStudent}]]
        }

    })
</script>

<!-- Bootstrap core JavaScript
=============================xQ===================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>

<!-- Icons -->
<script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
<script>
    feather.replace()
</script>

<!-- Graphs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>

</body>

</html>